import React from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Button } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import ClaimItem from './ClaimItem'
import { ClaimContext } from './context'
const { List, Item } = Form

// 添加按钮行
function AddBtnLine ({ fields, callback }) {
  const isFirst = fields.length === 0
  return (
    <ClaimContext.Consumer>
      {({ computeClaimFee }) => {
        const clickHandle = () => {
          callback()
          setTimeout(() => {
            computeClaimFee()
          }, 0)
        }
        return (
          <Row>
            {!isFirst ? <Col flex='30px' /> : null}
            <Col flex='auto'>
              <Item labelCol={{ flex: '80px' }} label={isFirst ? undefined : ' '} colon={false} style={{ marginBottom: 0 }}>
                <Button type='dashed' onClick={() => clickHandle()} style={{ width: '100%' }}>
                  <PlusOutlined />
                  <span>添加仲裁请求</span>
                </Button>
              </Item>
            </Col>
          </Row>
        )
      }}
    </ClaimContext.Consumer>
  )
}

function Main ({ label, name, visible }) {
  return (
    <div>
      <Item noStyle name={[name, 'item_count_amend']}><span /></Item>
      {
        visible ? (
          <Item label={label} name={name} labelCol={{ flex: '120px' }} rules={[{ required: true, message: `${label}不能为空` }]}>
            <List name={[name, 'items']}>
              {(fields, { add, remove }) => (
                <div>
                  {
                    fields.map((field, i) => <ClaimItem key={field.name} field={field} index={i} remove={remove} deleleAble={fields.length > 1} />)
                  }
                  <AddBtnLine fields={fields} callback={add} />
                </div>
              )}
            </List>
          </Item>
        ) : (
          <Item name={name} noStyle><span /></Item>
        )
      }
    </div>
  )
}

Main.propTypes = {
  label: PropTypes.string,
  name: PropTypes.string,
  visible: PropTypes.bool
}
Main.defaultProps = {
  label: '',
  name: '',
  visible: false
}

export default Main
